<!--
 * @Author: shenya
 * @Date: 2023-08-14 15:45:41
 * @Description: 查看送养协议
-->
<template>
  <el-dialog
    title="查看送养协议"
    :visible.sync="_visible"
    width="1000px"
    append-to-body
  >
    <div class="adopt-all">
      <div class="adopt-review">
        <div class="adopt-information">送养信息</div>
        <div class="adopt-descript">
          <el-descriptions :column="2">
            <el-descriptions-item label="送养人手机号">
              {{ reviewObj.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="送养人姓名">
              {{ reviewObj.adoptName }}
            </el-descriptions-item>
            <el-descriptions-item label="送养人身份证号">
              {{ reviewObj.adoptCard }}
            </el-descriptions-item>
            <el-descriptions-item label="家庭地址">
              {{ reviewObj.adoptAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="用户ID">
              {{ reviewObj.userId }}
            </el-descriptions-item>
            <el-descriptions-item label="用户昵称">
              {{ reviewObj.nickName }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div
        v-for="(item, index) in reviewObj.petInfoList"
        :key="index"
        class="pet-information"
      >
        <div>
          <div class="pet-font">宠物信息</div>
          <div class="pet-descript">
            <el-descriptions :column="2">
              <el-descriptions-item label="宠物编号">
                {{ item.petCode }}
              </el-descriptions-item>
              <el-descriptions-item label="宠物昵称">
                {{ item.petName }}
              </el-descriptions-item>
              <el-descriptions-item label="宠物品种">
                {{ item.varietyName }}
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{ item.petGender }}
              </el-descriptions-item>
              <el-descriptions-item label="所属爱心收容站">
                {{ item.baseName }}
              </el-descriptions-item>
              <el-descriptions-item label="收容站位置">
                {{ reviewObj.tenantAddr }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    reviewObj: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-descriptions-item__label {
    font-size: 14px !important;
  }
  .el-descriptions-item__content {
    font-size: 14px !important;
  }
}
.adopt-all {
  margin-left: 20px;
  .adopt-review {
    position: relative;
    margin-top: 20px;
    .adopt-information {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      &::before {
        content: '';
        position: absolute;
        width: 6px;
        height: 20px;
        background-color: red;
        left: -12px;
        border-radius: 4px;
      }
    }
    .adopt-descript {
      margin-top: 20px;
    }
  }
  .pet-information {
    position: relative;
    .pet-font {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-top: 20px;
      &::before {
        content: '';
        position: absolute;
        width: 6px;
        height: 20px;
        background-color: red;
        left: -12px;
        border-radius: 4px;
      }
    }
    .pet-descript {
      margin-top: 20px;
    }
  }
}
</style>
